:root {
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #374151;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;

    --sky-950: #082f49;
    --sky-900: #0c4a6e;
    --sky-800: #075985;
    --sky-700: #0369a1;
    --sky-600: #0284c7;
    --sky-500: #0ea5e9;
    --sky-400: #38bdf8;

    --bs-body-color: var(--slate-200);
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
    background-image: linear-gradient(0deg, var(--slate-800) 0%, var(--slate-900) 0%);
    overflow: hidden;
} 
html,
body {
  height: 100%;
  /* text-shadow: 0 0 2px #ffffff50; */
}


/* utils */
.border-slate-800 {
        border: 1px solid var(--slate-800);
}
.border-slate-700-3 {
        border: 3px solid var(--slate-700);
}

.border-slate-700 {
    border: 2px solid var(--slate-700);
}
.border-slate-700-1 {
    border: 1px solid var(--slate-700);
}

.border-slate-600-1 {
    border: 1px solid var(--slate-600);
}


.bg-slate-800 {
    background-color: var(--slate-800);
    color: var(--slate-500);
    transition: background-color .115s ease-in-out
    color .115s ease-in-out;
}

.bg-slate-800:hover, 
.bg-slate-800:focus {
    background-color: var(--slate-600);
    color: var(--slate-300);
}


.bg-slate-700 {
    background-color: var(--slate-700);
    color: var(--slate-400);
    transition: background-color .115s ease-in-out
    color .115s ease-in-out;
}

.bg-slate-700:hover,
.bg-slate-700:focus {
    background-color: var(--slate-500);
    color: var(--slate-300);
}

.bg-sky-800 {
        background-color: var(--sky-800);
        color: var(--slate-300);
        transition: background-color .115s ease-in-out
        color .115s ease-in-out;
}

.bg-sky-800:hover,
.bg-sky-800:focus {
        background-color: var(--sky-700);
        color: var(--slate-200);
}


.bg-sky-700 {
        background-color: var(--sky-700);
        color: var(--slate-300);
        transition: background-color .115s ease-in-out
        color .115s ease-in-out;
}

.bg-sky-700:hover,
.bg-sky-700:focus {
        background-color: var(--sky-600);
        color: var(--slate-200);
}



.disable_selection {
  webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* BASE STATIC */
#message {
    position: fixed;
    bottom: 0;
    right: 0;
    animation: bounce-top, slide-out-blurred-top;
    animation-duration: 0.9s, 0.45s; 
    animation-delay: 0s, 4s;
    animation-fill-mode: forwards;
}

.alert-danger {
        background-color: #842029;;
        color: #f5c2c7;
        border-color: #ba2d39;
}
.alert-success {
        background-color: #0f5132;;
        color: #d1e7dd;
        border-color: #228b5a;
}
form .form-control,
form .form-check-input {
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
        color:var(--slate-400);
        border: 1px solid var(--slate-600);
}

form .form-control:is(:active, :hover, :focus),
form .form-check-input:is(:active, :hover, :focus) {
        color:var(--slate-300);
}

form .form-check .form-check-label {
        color:var(--slate-500);
}


/* ANIMACJE */
.slide-out-blurred-top {
	-webkit-animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) 5s both;
	        animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) 5s both;
}

.blink {
	-webkit-animation: blink-2 0.9s both;
	        animation: blink-2 0.9s both;
}


.jello-horizontal{-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both}

@-webkit-keyframes slide-out-blurred-top {
    0% {
            -webkit-transform: translateY(0) scaleY(1) scaleX(1);
                    transform: translateY(0) scaleY(1) scaleX(1);
            -webkit-transform-origin: 50% 0%;
                    transform-origin: 50% 0%;
            -webkit-filter: blur(0);
                    filter: blur(0);
            opacity: 1;
    }
    100% {
            -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
                    transform: translateY(-1000px) scaleY(2) scaleX(0.2);
            -webkit-transform-origin: 50% 0%;
                    transform-origin: 50% 0%;
            -webkit-filter: blur(40px);
                    filter: blur(40px);
            opacity: 0;
    }
    }
    @keyframes slide-out-blurred-top {
    0% {
            -webkit-transform: translateY(0) scaleY(1) scaleX(1);
                    transform: translateY(0) scaleY(1) scaleX(1);
            -webkit-transform-origin: 50% 0%;
                    transform-origin: 50% 0%;
            -webkit-filter: blur(0);
                    filter: blur(0);
            opacity: 1;
    }
    100% {
            -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
                    transform: translateY(-1000px) scaleY(2) scaleX(0.2);
            -webkit-transform-origin: 50% 0%;
                    transform-origin: 50% 0%;
            -webkit-filter: blur(40px);
                    filter: blur(40px);
            opacity: 0;
    }
}
         


@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
    }
    @keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
  

@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}